import React, { useState, useEffect } from 'react';
import { Button, Form, Input, Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import './index.less';

const ResignationsCheck: React.FC<TableListItem> = (props) => {
  const [form] = Form.useForm();
  // const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  // const [selectedRows, setSelectedRows] = useState([]);

  useEffect(() => {}, []);

  const onFinish = (values: any) => {
    console.log(values);
  };

  const onReset = () => {
    form.resetFields();
  };

  // const btnClick = () => {
  //   console.log('selectedRowKeys', selectedRowKeys);
  //   console.log('selectedRows', selectedRows);
  // };
  interface TableSource {
    appName3: 'string';
    appName4: 'string';
    appName1: 'string';
    appName5: 'string';
    appName6: 'string';
    appName7: 'string';
    appName8: 'string';
  }
  /**
   * 定义行信息
   */
  const columns: ColumnsType<TableSource> = [
    {
      title: '序号',
      dataIndex: 'index',
      align: 'center',
      render: (_, row, index) => index + 1,
    },
    {
      title: '用户姓名',
      dataIndex: 'appName3',
      align: 'left',
    },
    {
      title: '用户账号',
      dataIndex: 'appName4',
      align: 'left',
    },
    {
      title: '主岗部门',
      dataIndex: 'appName1',
      align: 'left',
    },
    {
      title: '状态',
      dataIndex: 'appName5',
      align: 'left',
    },
    {
      title: '离职时间',
      dataIndex: 'appName6',
      align: 'left',
    },
    {
      title: '最新复核时间',
      dataIndex: 'appName7',
      align: 'left',
    },
    {
      title: '权限是否清理',
      dataIndex: 'appName8',
      align: 'left',
    },
    {
      title: '操作',
      dataIndex: 'appCode',
      align: 'left',
      render: () => {
        return <div>查看</div>;
      },
    },
  ];

  const dataSource: TableSource[] = [
    {
      key: '1',
      appName3: 'test1',
      appName4: 'test2',
      appName1: '管理信息部',
      appName5: 'test3',
      appName6: 'test4',
      appName7: 'test5',
      appName8: '是',
    },
    {
      key: '2',
      appName3: 'test11',
      appName4: 'test22',
      appName1: '管理信息部',
      appName5: 'test33',
      appName6: 'test44',
      appName7: 'test55',
      appName8: '否',
    },
  ];

  // const rowSelection = {
  //   selectedRowKeys,
  //   onChange: (selectedRowKeys, selectedRows) => {
  //     setSelectedRowKeys(selectedRowKeys);
  //     setSelectedRows(selectedRows);
  //   },
  // };

  return (
    <>
      <div className="leaveWrapper">
        <Form
          form={form}
          name="control-hooks"
          onFinish={onFinish}
          colon={false}
          style={{ display: 'flex', flexWrap: 'nowrap' }}
        >
          <Form.Item
            name="用户姓名"
            label="用户姓名"
            className="custom-form-item "
          >
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item
            name="用户账号"
            label="用户账号"
            className="custom-form-item "
          >
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" className="searchBtn">
              查询
            </Button>
            <Button htmlType="button" onClick={onReset}>
              重置
            </Button>
          </Form.Item>
        </Form>
      </div>
      {/* <Button onClick={btnClick}>复核</Button> */}
      <Table
        columns={columns}
        dataSource={dataSource}
        // rowSelection={rowSelection}
        pagination={{
          total: 30,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `共 ${total} 条`,
        }}
      ></Table>
    </>
  );
};

export default ResignationsCheck;
